<template>
	<div class="page-wrap">
		<div class="page-inner">
			<div class="page-ctx-wrap">
				<div class="panel-item" data-title="基础信息">
					<div class="section-title">提交信息</div>
					<div class="input-item">
						<div class="input-box">
							<div class="label ">选择模板</div>
							<div class="val">
								<el-select clearable="" @change="SelectMuban" v-model="form.ptId"  placeholder="请选择">
									<el-option v-for="item in modalList" :key="item.id" :label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					
					<div class="input-item" v-if="isContent>=0">
						<div class="input-box">
							<div class="label ">是否只使用内容</div>
							<div class="val" style="font-size: 14px;color: #666666;">
								{{isContent==1?'是':'否'}}
							</div>
						</div>
					</div>
					
					<div class="input-item" v-if="ziduanList.length>0" v-for="(item,index) in ziduanList" :key="index">
						<div class="input-box">
							<div class="label">{{item.title}}</div>
							<div class="val">
								<el-input :disabled="item.isshow=='否'?true:false"  v-model="item.content" placeholder="">
								</el-input>
							</div>
						</div>
					</div>
					
					
				</div>
				
				<span slot="footer" class="dialog-footer">
					<el-button type="" @click="formCancel">取消</el-button>
					<el-button type="primary" @click="do_submit()">确认</el-button>
				</span>
				
			</div>
			
		</div>
		
		
		
	</div>
</template>

<script>
	import w_base_upload_image from '@/components/base/w_base_upload_image.vue'
	export default {
		components: {
			w_base_upload_image,
		},
		data() {
			return {
				form: {
					id: this.$route.query.id||'',
					ptId: "",
					content:''
				},
				//商品自定义参数
				dataList_addrows: [
					{
						title: '',
						x: '',
						y: '',
					},
				],
				preview_image_is_show:false,
				modalList: [],
				outlets_information: [],
				ziduanList:[],
				isContent:'-1'
			}
		},
		mounted(){
			this.query_modalList()
			if(this.$route.query.id>0){
				this.query_detail()
			}
		},
		// 自定义参数列表
		methods: {
			addRow() {
				this.dataList_addrows.push({ title: '', x: '', y: '' });
			},
			uploadChange(url) {
				this.form.image = url;
			},
			formCancel() {
				this.$router.back();
			},
			do_submit(){
				/* if (!this.form.invoiceAdmin) {
					alertErr("请填写开票人");
					return;
				} */
				// if (!this.form.invoiceRemark) {
				// 	alertErr("请填写开票备注");
				// 	return;
				// }		
				/* if (!this.form.invoiceUrl) {
					alertErr("请上传发票附件");
					return;
				} */
				this.form.content=JSON.stringify(this.ziduanList)
			
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_editPtContent",
						...this.form,
					}
				}).then(res => {
					alert(res)
					if (res.code == 200) {
						this.toBack()
					}
				})
			},
			query_modalList(){
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_getPtModelList",
						page:1,
						pageNum:1000000
					}
				}).then(res => {
					if (res.code == 200) {
						this.modalList=res.data.list
					}
				})
			},
			SelectMuban(){
				console.log(this.form.ptId,'模板id')
				this.form.content=[]
				this.ziduanList=[]
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_getPtModel",
						id:this.form.ptId
					}
				}).then(res => {
					if (res.code == 200) {
						this.form.content=res.data.content
						this.isContent=res.data.isContent
						this.form.content.forEach(v => {
							this.ziduanList.push({'title':v.title,'isshow':v.isshow,'content':''})
						})
						
						//this.ziduanList=this.form.content
						console.log(this.ziduanList,'1000')
					}
				})
			},
			async InputConfirm(e,index){
				console.log(e)
				this.ziduanList[index].content=e.content
			},
			query_detail(){
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "Pt_getPtContent",
						id:this.form.id
					}
				}).then(res => {
					/* alert(res) */
					if (res.code == 200) {
						this.ziduanList=res.data.content
						this.form.ptId=res.data.ptId
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ .upload-image .el-upload {
		width: 100px;
		height: 100px;
		line-height: 98px;
	}

	/deep/ .upload-video .el-upload {
		width: 100px;
		height: 100px;
		line-height: 98px;

		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		box-sizing: border-box;
		cursor: pointer;
		vertical-align: top;
	}

	/deep/ .el-upload-list__item {
		background: #eef6ff !important;
		font-size: 16px;
	}

	.video-preview-box {
		margin-top: 20px;
	}





	.footer-actions {
		display: flex;
		justify-content: flex-end;
		justify-content: center;
		position: fixed;
		z-index: 100;
		bottom: 0;
		right: 0;
		left: 190px;
		padding: 10px;
		background: #fff;
		box-shadow: 0 0 1px 0 #ccc;
		padding-right: 35px;
	}





	// .el-radio-group.column {
	//   display: flex;
	//   flex-direction: column;
	// }

	.tip-input {
		margin-left: 20px;
		display: inline-block;
		max-width: 150px;
	}

	.time-divider {
		margin: 0 15px;
	}

	.page-wrap {
		.page-inner {}
	}

	.page-ctx-wrap {
		background: #fff;
		padding: 20px;
		border-radius: 6px;
	}

	.section-title {
		margin-bottom: 20px;
		width: 100%;
		height: auto;
		line-height: 46px;
		background: rgb(241, 242, 245);
		padding-left: 30px;
		font-size: 16px;
		font-weight: 600;
	}

	.panel-item {
		padding-bottom: 100px;
		// .flex();
		// flex-wrap: wrap;

		.input-item {
			margin-bottom: 20px;
			width: 100%;
			max-width: 800px;
			// width: 50%;

			&.hidden-item {
				display: none;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.input-box {
				width: 100%;
				display: flex;
				align-items: flex-start;

				.label {
					height: 32px;
					line-height: 32px;
					min-width: 160px;
					min-width: 100px;
					text-align: right;
					margin-right: 40px;
					font-size: 20px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666666;

					&.required {
						position: relative;

						&:after {
							content: "*";
							color: #f00;
							position: absolute;
							right: -15px;
							top: 3px;
							// font-weight: bold;
						}
					}

					&.hidden {
						visibility: hidden;
					}
				}
			}

			//输入框组
			.inputs {
				.flex();

				.date-box {
					flex: 1;
				}

				.shuru-box {
					margin-left: 20px;
					flex: 4;
				}
			}

			.val {
				flex: 2;
				font-size: 20px;
				font-family: PingFang SC;
				color: #000000;

				.shuru {
					width: 100%;
					padding-left: 20px;
					outline: none;
					height: 40px;
					background: #ffffff;
					border: 1px solid #d4d8eb;
					border-radius: 4px;
					font-size: 16px;
				}

				.form-ele {
					.el-input {
						width: 100%;
					}

					.el-select {
						width: 100%;
					}

					.el-cascader {
						width: 100%;
					}
				}

				.input-tip {
					line-height: 32px;
					font-size: 14px;
					font-family: PingFang SC;
					color: #666;
				}
			}
		}
	}

	// 标签
	.tag-wrap {

		// 标签样式
		.cus-tag-item {
			margin-right: 15px;
		}

		.el-tag+.el-tag {
			margin-left: 10px;
		}

		.button-new-tag {
			margin-left: 10px;
			height: 32px;
			line-height: 30px;
			padding-top: 0;
			padding-bottom: 0;
		}

		.input-new-tag {
			width: 90px;
			margin-left: 10px;
			vertical-align: bottom;
		}

		.cus-tag-input {
			-webkit-appearance: none;
			background-color: #fff;
			background-image: none;
			border-radius: 4px;
			border: 1px solid #dcdfe6;
			box-sizing: border-box;
			color: #606266;
			display: inline-block;
			outline: 0;
			padding: 0 15px;
			width: 90px;
			height: 32px;
			line-height: 32px;
			transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

			&:focus {
				border-color: #66b1ff;
			}
		}

		// 标签样式

		.table-box {
			width: 100%;
			border-collapse: 0;
			/* table-layout: fixed; */
			border: 1px solid #eee;
			font-size: 14px;
		}

		.table-box tr {
			/* min-height: 40px; */
		}

		.table-box th {
			text-align: left;
			padding: 10px 10px;

			border-right: 1px solid #eee;
		}

		.table-box td {
			text-align: left;
			padding: 10px 10px;
			border-top: 1px solid #eee;
			border-right: 1px solid #eee;
		}

		.table-box td:nth-child(1) {
			width: 20%;
		}

		.table-box td:nth-child(2) {
			width: 80%;
		}

		.table-box .tag-item {
			cursor: pointer;
			outline: none;
			user-select: none;
			margin-right: 10px;
			display: inline-flex;
			align-items: center;
			color: #333;
		}

		.table-box .tag-item:before {
			content: "";
			width: 20px;
			height: 20px;
			display: inline-block;
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-0.png");
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			margin-right: 3px;
		}

		.table-box .tag-item.checked:before {
			background-image: url("https://changkun.dx.hdapp.com.cn/erp/images/check-1.png");
		}
	}


	.loop-add {
		margin-top: 20px;
	}
</style>